<template>
  <el-card>
    <h2 style="margin: 0 0 16px 0">按钮组件演示</h2>
    <p style="color:#64748b; margin-bottom: 16px">以下为封装按钮 `AppButton` 的不同类型与状态示例。</p>

    <el-space wrap>
      <AppButton variant="search" @click="onClick('查询')"/>
      <AppButton variant="add" @click="onClick('新增')"/>
      <AppButton variant="delete" @click="onClick('删除')"/>
      <AppButton variant="export" @click="onClick('导出')"/>
      <AppButton variant="import" @click="onClick('导入')"/>
    </el-space>

    <el-divider/>

    <el-space wrap>
      <AppButton variant="search" :loading="true"/>
      <AppButton variant="add" plain/>
      <AppButton variant="delete" plain/>
      <AppButton variant="export" size="small"/>
      <AppButton variant="import" size="large"/>
    </el-space>
  </el-card>
</template>

<script setup>
import AppButton from '@/components/AppButton.vue'
import { ElMessage } from 'element-plus'

const onClick = (label) => {
  ElMessage.success(`点击了${label}按钮`)
}
</script> 